<template>
  <div class="rec">
    <!-- 回收订单管理 -->
    <hoseVue :obj="obj">
      <search :iptObj="iptObj" :optionArr="optionArr"></search>
      <Table @deleteRow1="details1" @deleteRow2="details2" :tableData="tableData" :operationObj="operationObj"
        :tableArr="tabobj"></Table>
      <PaginationVue @cChange="cc" :total="total" :size="size"></PaginationVue>
    </hoseVue>
  </div>
  <Mask ref="mask1" title="订单详情" type="wrap" @cancel="gb" :headright="false">
    <!-- <template #main>
      <div class="recmain">
        <div>收货员信息</div>
        <p>尚未接单，请接单后分配收货员。</p>
      </div>
    </template> -->
  </Mask>

  <Mask ref="mask2" title="订单详情" type="wrap" @cancel="gb" @preservation="affirm">
    <template #main>
      <div class="recmain">
        <div>收货员信息</div>
        <p @click="fun"><el-button type="primary">{{ name }}</el-button></p>
      </div>
    </template>
  </Mask>
  <ReceivingVue ref="dk" @mit="re"></ReceivingVue>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import hoseVue from "../../components/hose.vue";
import search from "../../components/Search.vue";
import Table from "../../components/Table.vue";
import Mask from "../../components/Mask.vue";
import ReceivingVue from "../../components/Receiving.vue";
import { getreorders } from '../../api/index'
import { useCounterStore } from "../../stores/counter.js";
import { newTime, hint } from '../../components/Method'
import PaginationVue from "../../components/Pagination.vue";


const stores = useCounterStore();
const obj = reactive({
  flag: false,
  name: "充值",
  price: "钱包余额:1569.00",
});

const name = ref('选择收货员')


const size = ref(9)
const total = ref(0)




function affirm() {

  if (name.value !== '选择收货员') {
    hint(`${name.value}已接单`)
    mask2.value.Tube()
    console.log(tableData.value[indexNum.value].status);
    tableData.value[indexNum.value].status = '配送中'
    tableData.value[indexNum.value].btn2 = pd(tableData.value[indexNum.value].status)

    // tableData.value[indexNum.value].接单剩余时间 = '',
    delete (tableData.value[indexNum.value].接单剩余时间)
    // tableData.value[indexNum.value].接单剩余时间.value=''
    console.log(tableData.value[indexNum.value]);
  } else {
    hint(`请选择派送员`, 'error')
  }
  // console.log(111);
}



function cc(index) {
  // console.log(index);
  getreorders(index).then((res) => {
    // console.log(res);
    tableData.value = []
    total.value = res.data.data.totalCount
    arr.value = res.data.data.data
    arr.value.forEach(item => {
      tableData.value.push({
        reorderid: item.reorderid,
        time: newTime('YYYY-MM-DD hh:mm:ss', item.time),
        接单剩余时间: item.status === '待接单' ? stores.timeDao(newTime('YYYY-MM-DD HH:mm:ss')) : '',
        people: item.people,
        site: item.site,
        phone: item.phone,
        status: item.status,
        type2: '接单',
        btn2: pd(item.status)
      })

    });
    // console.log(tableData.value);
  })
}


function re(a) {
  // console.log(a);
  name.value = a
  dk.value.open();
}


const indexNum = ref(null)
const mask1 = ref(null);
const mask2 = ref(null);
const mask = ref(null);
const dk = ref(null);


function fun() {
  dk.value.open();
}

const arr = ref([])

function pd(val) {
  if (val === '待接单') {
    return true
  } else {
    return false
  }
}

console.log(newTime('YYYY-MM-DD HH:mm:ss'));


// 请求页面数据
getreorders().then((res) => {
  // console.log(res);
  total.value = res.data.data.totalCount
  arr.value = res.data.data.data
  arr.value.forEach(item => {
    tableData.value.push({
      reorderid: item.reorderid,
      time: newTime('YYYY-MM-DD hh:mm:ss', item.time),
      接单剩余时间: item.status === '待接单' ? stores.timeDao(newTime('YYYY-MM-DD HH:mm:ss')) : '',
      people: item.people,
      site: item.site,
      phone: item.phone,
      status: item.status,
      type2: '接单',
      btn2: pd(item.status)
    })

  });
  // console.log(tableData.value);
})



const tabArr = ref(['订单编号', '订单时间', '接单剩余时间', '联系人', '联系电话', '回收地点', '状态'])

const tabobj = reactive({
  reorderid: '订单编号', time: '订单时间', 接单剩余时间: '接单剩余时间',
  people: '联系人', phone: '联系电话', site: '回收地点', status: '状态'
})
// 接单倒计时 js 函数封装
// console.log(stores.timeDao("2022-12-13 20:32:00").value);
const tableData = ref([])

// const tableData = ref([
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 12:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 12:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-18 12:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 12:10:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:14",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:14"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:21",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:24:21"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   },
//   {
//     订单编号: "H202212091111",
//     订单时间: "2022-12-17 10:24:24",
//     // 接单剩余时间: stores.timeDao("2022-12-17 10:23:24"),
//     联系人: "老韩",
//     联系电话: "15300000000",
//     回收地点: "中国矿业大学南湖校区松苑1号楼",
//     状态: "待接单",
//   }]);

const iptObj = reactive({
  title: "回收订单管理",
  userBool: true,
  userTitle: "订单编号",
  userTel: "联系电话",
  userRegion: "当前状态",
  telrBool: true,
  regionBool: true,
  userText: "请输入订单编号",
  telText: "请输入联系电话",
  regionText: "请选择内容",
});

const operationObj = reactive({
  operation1: "查看详情",
  operation2: "接单",
  title1: "操作", //操作标题
  title2: "",
  type1: "primary", //button 类型
  type2: "primary",
  text1: false, // true 为文字类型
  text2: false,
  bool1: true, //操作是否显示
  bool2: true,
  row: false,
});

// console.log(mask);
const optionArr = ["全部", "待接单", "待收货", "收获中", "已完成"];

function details1(index) {
  // delete(tableData.value[index].type2)
  // delete(tableData.value[index].btn2)

  mask1.value.open(tableData.value[index], tabArr.value);
}

function details2(index) {
  mask2.value.open(tableData.value[index], tabArr.value);
  indexNum.value = index
}


function gb() {
  mask1.value.Tube()
  mask2.value.Tube()
}



</script>

<style lang="less" scoped>
.rec {
  width: 100%;
  height: 100%;
  position: relative;
}

.recmain {
  display: flex;
  flex-wrap: wrap;

  div {
    width: 100%;
    color: black;
    font-weight: 700;
    font-size: 18px;
  }

  p {
    padding: 14px 0;
    color: rgba(172, 172, 172, 0.9);
    min-width: 30%;
    font-weight: 400;
  }
}
</style>
